<template>
	<view class="content">
		<view class="txt4">请完成以下认证</view>
		<view class="txt4">当前手机号{{user.user.mobile}}</view>
		<view class="zcon1">
			<input type="text" maxlength="11" v-model="tel" :disabled="smsFlag" placeholder="请输入手机号" />
		</view>
		<view class="zcon1">
			<input type="text" v-model="code" placeholder="请输入验证码" />
			<view class="txt3" @tap="sendCode">{{sendTime}}</view>
		</view>
		<view class="btnsave" @tap="save">完成</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				tel:'',
				sendTime: '获取验证码',
				sendColor: '#363636',
				snsMsgWait: 60,
				code:'',
				smsFlag:false,
				types:0,
				user:''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		
		onLoad(options) {
			var that = this;
			this.Usermy()
			this.types = options.types==1?1:0
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			Usermy(){
				const that =this;
				app.globalData.api.request('User/my', {}, 'post', 'form').then((res) => {
					if (res.code == 0) {
						//console.log(res)
						that.user = res.data;
					}else{
						app.globalData.show(res.msg)
					}
				});
			},
			// 获取验证码
			  sendCode: function() {
			    var that = this;
			
				if (!this.smsFlag) {
					if (this.tel == "") {
					  app.globalData.show('请输入手机号');
					  return;
					}
				// /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8,6]|8[0-9]|9[1,8,9])\d{8}$/
					if (this.tel.length!=11) {
					  app.globalData.show('手机号输入错误');
					  return;
					}
				
					// 60秒后重新获取验证码
					var inter = setInterval(function() {
					  this.smsFlag = true
					  this.sendColor = '#cccccc'
					  this.sendTime = this.snsMsgWait + 's后重发'
					  this.snsMsgWait = this.snsMsgWait - 1
					  if (this.snsMsgWait < 0) {
						clearInterval(inter)
						this.sendColor = '#363636'
						this.sendTime = '发送验证码'
						this.snsMsgWait = 60
						this.smsFlag = false
					  }
					}.bind(this), 1000);
					app.globalData.api.request('index/getsm', {
						tel:this.tel
					}, 'POST', 'form').then((res) => {
						if (res.code == 0) {}else{
							app.globalData.show(res.msg)
						}
					});
				}
			   
			  },
			save(){
				var that = this;
				if(this.tel==''){
					app.globalData.show('请输入手机号~')
					return true
				}
				if(this.code==''){
					app.globalData.show('请输入验证码~')
					return true
				}
				app.globalData.api.request('User/changeMobile', {
					mobile :this.tel,
					yzm:this.code,
				}, 'POST', 'form').then((res) => {
					if (res.code == 0) {
						app.globalData.d('换绑成功~')
					}else{
						app.globalData.show(res.msg)
					}
				});
				
			}
		}
	};
</script>
<style>
	.txt4{
		width:610rpx;
		height: auto;
		position: relative;
		display: table;
		margin: auto;
		line-height: 35px !important;
		color: rgb(16,16,16) !important;
		font-size: 24rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.zcon1{
		width:610rpx;
		height: 100rpx;
		position: relative;
		display: table;
		box-sizing: border-box;
		padding: 0px 24rpx;
		margin: auto;
		margin-top: 30rpx;
		border-radius: 5px;
		border-bottom: 1px solid rgba(243,243,243, 1);
	}
	.txt1{
		width: 100%;
		height: auto;
		display: table;
		text-align: center;
		font-size: 30rpx;
		color: rgba(36,195, 115, 1);
		font-weight: bold;
	}
	.txt1>span{
		color: rgba(220,71, 65, 1) !important;
	}
	.logins{
		width: 180rpx;
		height:180rpx;
		border-radius:180rpx;
		display: table;
		margin:0px auto;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	.txt{
		width: 100%;
		height: auto;
		display: table;
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 40px;
	}
	.txt3{
		width: 152rpx;
		height: 62rpx;
		background: #8665AF;
		border-radius: 4rpx;
		text-align: center;
		line-height: 62rpx;
		position: absolute;
		top: 50%;
		right: 28rpx;
		margin-top: -31rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
	}
	.btnsave{
		width: 610rpx;
		height: 80rpx;
		background: #8665AF;
		border-radius: 8rpx;
		display: table;
		margin: 50px auto;
		text-align: center;
		line-height: 80rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.zcon1>input{
		width: 100%;
		height: 100rpx;
		display: table;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
		box-sizing: border-box;
		padding-right: 100px;
	}
	page{
		background-color: rgba(246,246,246,1);
	}
	.content {
		width: 700rpx;
		height: auto;
		display: table;
		margin: 25rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top: 20rpx;
	}
</style>